<style>
    body
    {
        background-color:#1E4C9F;
        color:#fff;
        margin:0;
        padding:0;
    }
    img
    {
        border:0;
    }
    #container
    {
        padding:5px;
        font-family:Verdana;
        width:280px;
        font-size:16px;
    }
    .title
    {
         font-weight:bold;
         font-size:22px;
         padding:5px 0 8px 0;
    }
    .title span
    {
         border-bottom:solid 4px #fff;
    }
    #record_container
    {
        margin:15px;
    }
    #record_container table
    {
        border:solid 1px #000;
        background-color:#fff;
        color:#000;
    }
    #record_container table td
    {
        padding:5px 20px;
        text-align:center;
        width:60px;
    }
    #record_container table .bottom
    {
        border-bottom:solid 1px #000;
    }
    #record_container table .left
    {
        border-left:solid 1px #000;
    }
    #record_container table .hide
    {
        display:none;
    }
    button
    {
        margin:10px;
        cursor:pointer;
        border:solid 3px #f00;
        padding:5px;
    }
    .message{
        padding:5px;
        text-align:center;
    }
</style>

<div id="container">
    <center class="title"><span>Tic-Tac-Toe</span></center>
    <center id="record_container">
        <table id="record_table" cellpadding="0" cellspacing="0">
            <tr class="message">
                <td colspan="2">Loading...</td>
            </tr>
            <tr class="message hide">
                <td colspan="2" style="width:220px;">Click below to play Tic-Tac-Toe!</td>
            </tr>
            <tr class="hide">
                <td class="bottom">Wins</td>
                <td class="bottom left">Losses</td>
            </tr>
            <tr class="hide">
                <td id="wins"></td>
                <td class="left" id="losses"></td>
            </tr>
        </table>
    </center>
    <center>
        <div><img src="http://c1.ac-images.myspacecdn.com/images02/65/l_0f0243eda1b94c1794d78be329c3ac7c.png" /></div>
        <button onclick="rNT(gadgets.views.ViewType.CANVAS);">Click here to play now!</button>
    </center>
</div>

<script type="text/javascript">

    // this function wraps gadgets.views.requestNavigateTo,
    // view comes from the enum gadgets.views.ViewType
    function rNT(view){

        // get the list of views that the container currently supports,
        // this returns a hash table keyed by view name
        var supported = gadgets.views.getSupportedViews();

        // if the view name passed in is in the supported hash table
        if(supported[view]){
        
            // request to navigate to that view
            gadgets.views.requestNavigateTo(supported[view]);
        }
    }
    
    // entry point for the view
    function initialize(){
        // get the URL params
        var params = gadgets.views.getParams();
        
        // get the ID of the current owner, there is a bug
        // here in MySpace, it's ownerId on the home view
        // but ownerid (note lower case) on profile
        var id = params.ownerId || params.ownerid;
        
        // build the URL using
        var url = "http://opensocial--tic-tac-toe.appspot.com/ws?id=" + id;
        
        // make the request, opt_params isn't required as the
        // default parameters, such as GET, will be fine
        gadgets.io.makeRequest(url, got_init);
    }
    
    // function used to hide the "Loading..." message
    // and display the actual wins and losses
    function showRecord(){
        var rows = getRows("record_table");
        
        // set the display values
        rows[0].style.display = "none";
        rows[1].style.display = "none";
        rows[2].style.display = "block";
        rows[3].style.display = "block";
    }
    
    // returns all the rows for the specified table
    function getRows(id){
        // find the table
        var table = document.getElementById(id);
        
        // get all the tr elements in the table
        return table.getElementsByTagName("tr");
    }
    
    // retries the initial makeRequest
    function retryRequest(){
    
        // check if there are any retries left
        if(retries > 0){
            retries--;
            
            window.setTimeout(initialize, 250);
        }
        
        // oh well, show the error message and ask
        // the user to refresh the page
        else{
            showError();
        }
    }
    
    // displays a generic error message
    function showError(){
        var rows = getRows("record_table");
        
        // set the display values
        rows[0].style.display = "none";
        rows[1].style.display = "block";
        rows[2].style.display = "none";
        rows[3].style.display = "none";
    }
    
    // the response from the initial makeRequest
    // is handled here
    function got_init(response){
    
        // first check if there was an error back from the proxy
        if(!response || (response.errors && response.errors.length > 0) || response.errorCode){
            retryRequest();
        }
        else{
            // response came back successfully, it should be
            // a json string, so parse it into an object
            response = gadgets.json.parse(response.text);
            
            // if the response was parsed correctly, do some work on it
            if(response){
            
                // get the DOM element for wins
                var wins = document.getElementById("wins");
                
                // get the DOM element for losses
                var losses = document.getElementById("losses");
                
                // check if the server returned an error
                if(response.errorCode){
                
                    // probably means the server couldn't parse
                    // the owner's ID that was passed in, maybe
                    // a hack attempt?
                    if("invalidInput" === response.errorCode){
                        retryRequest();
                    }
                    
                    // if the ID wasn't found in the data store, that
                    // means this player hasn't played any games yet,
                    // so just set everything to 0
                    else if("inputNotFound" === response.errorCode){
                        wins.innerHTML = "0";
                        losses.innerHTML = "0";
                        
                        // remove the Loading... message
                        showRecord();
                    }
                    
                    // something unknown happened...
                    else{
                        retryRequest();
                    }
                }
                
                // check if the server returned a successful response
                else if(response.wins && response.losses){
                
                    // set the wins and losses to the returned data
                    wins.innerHTML = response.wins;
                    losses.innerHTML = response.losses;
                    
                    // remove the Loading... message
                    showRecord();
                }
                
                // otherwise, the server returned an unknown response
                else{
                    retryRequest();
                }
            }
            
            // the server returned some unknown response that couldn't be
            // parsed into a JSON object
            else{
                retryRequest();
            }
        }
    }
    
    var retries = 3;
    
    // hook the initialize function to run when the body is done loading
    gadgets.util.registerOnLoadHandler(initialize);
</script>